<template>
    <div>
        <!--登录地址输入框-->
        <span class="font">登录地址</span>
        <el-input
                v-model="loginInFor.ipaddr"
                placeholder="请输入登录地址"
                clearable
                prefix-icon="el-icon-search"
                size="mini"
                style="cursor: text;margin-top: 20px;margin-left: 10px;width: 190px"
        >
        </el-input>
        <!--用户名称输入框-->
        <span class="font" style="margin: 10px">用户名称</span>
        <el-autocomplete
                v-model="loginInFor.userName"
                :fetch-suggestions="querySearchForUsername"
                placeholder="请输入用户名称"
                clearable
                prefix-icon="el-icon-search"
                size="mini"
                style="cursor: text;margin-top: 10px;margin-left: 10px"
        >
        </el-autocomplete>
        <!--下拉选项框（status）-->
        <span class="font" style="margin: 10px">状态</span>
        <el-select v-model="loginInFor.status" clearable placeholder="请选择" size="mini">
            <el-option
                    v-for="item in statuses"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <!--登录时间-->
        <span class="font" style="margin: 10px">登录时间</span>
        <el-date-picker
                v-model="loginInFor.loginTime"
                size="mini"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="search" style="margin-left: 10px">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset('table')">重置</el-button>

        <br>
        <!--按钮区-->
        <el-row style="display: inline-block; margin-right: 15px;margin-top: 10px">
            <el-popconfirm
                    confirm-button-text='好的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定要删除这些吗？"
                    @confirm="deletes"
                    @cancel="cancelDelete"
            >
                <el-button type="danger" class="el-icon-delete" size="mini" :disabled=disableDelete slot="reference">删除
                </el-button>
            </el-popconfirm>
        </el-row>

        <el-row style="display: inline-block; margin-right: 15px;margin-top: 10px">
            <el-popconfirm
                    confirm-button-text='好的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定要清空所有登录日志吗？"
                    @confirm="deletes"
                    @cancel="cancelDelete"
            >
                <el-button type="danger" class="el-icon-delete" size="mini" slot="reference">清空
                </el-button>
            </el-popconfirm>
        </el-row>

        <el-row style="display: inline-block; margin-right: 15px;margin-top: 10px">
            <el-button type="warning" class="el-icon-download" size="mini" plain @click="exportExcel">导出</el-button>
        </el-row>

        <!--分页显示-->
        <el-table
                :data="sysLoginInFors"
                style="width: 100%" @select="checked" @select-all="checkAll" @sort-change="sort" ref="table">
            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    label="访问编号"
                    width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.infoId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户名称"
                    width="180" align="center" sortable="custom" prop="userName">
            </el-table-column>
            <el-table-column
                    label="登录地址"
                    width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.ipaddr }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="登录地点"
                    width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.loginLocation }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="浏览器"
                    width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.browser }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作系统"
                    width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.os }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="登录状态"
                    width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">
                        <el-tag v-if="scope.row.status == 0">成功</el-tag>
                        <el-tag type="danger" v-if="scope.row.status == 1">失败</el-tag>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作信息"
                    width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.msg }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="登录日期"
                    width="180" align="center" sortable="custom" prop="loginTime">
            </el-table-column>
        </el-table>

        <!--分页控件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="current"
                :page-sizes="[10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" align="right">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "LoginLog",
        data() {
            return {
                //用于排序的对象
                sortBy: {
                    prop: '',
                    order: '',
                },
                //用于显示输入框提示
                loginInForInput: [],
                //用于查询的对象
                loginInFor: {
                    ipaddr: "",
                    userName: "",
                    status: "",
                    loginTime: ""
                },
                statuses: [
                    {value: 0, label: "成功"},
                    {value: 1, label: "失败"}
                ],
                //当前页数
                current: 1,
                //总条数
                total: 0,
                //每页显示多少条（默认10条）
                size: 10,
                //用于显示表格数据
                sysLoginInFors: [],
                dialogFormVisible: false,
                //是否禁用多删
                disableDelete: true,
                //是否禁用修改
                disableEdit: true,
                //选中的行
                selections: []
            }
        },
        methods: {
            //控制输入查询时的建议列表中的数据
            querySearchForUsername(queryString, cb) {
                let loginInForInput = this.loginInForInput;
                let results = (queryString ? loginInForInput.filter(this.createFilterForUsername(queryString)) : loginInForInput).map(
                    item => {
                        return {
                            value: item.userName
                        }
                    }
                );
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //定义过滤规则
            createFilterForUsername(queryString) {
                return (item) => {
                    return (item.userName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            //获取所有的DictType给loginInForInput数组赋值
            loadAll() {
                this.axios.get("http://localhost:8080/logininfor").then(
                    res => {
                        this.loginInForInput = res.data.data;
                    }
                )
            },
            //模糊查询/分页查询
            search() {
                this.current = 1;
                this.axios.get("http://localhost:8080/logininfor/page?current=" + this.current + "&ipaddr=" + this.loginInFor.ipaddr
                    + "&userName=" + this.loginInFor.userName + "&status=" + this.loginInFor.status + "&size=" + this.size + "&loginTime=" + this.loginInFor.loginTime + "&order=" + this.sortBy.order + "&prop=" + this.sortBy.prop).then(
                    res => {
                        this.sysLoginInFors = res.data.data.records;
                        this.current = res.data.data.current;
                        this.total = res.data.data.total;
                        this.size = res.data.data.size;
                    }
                )
            },
            //重置
            reset(table) {
                this.loginInFor = {
                    ipaddr: "",
                    userName: "",
                    status: "",
                    loginTime: ""
                };
                this.current = 1;
                this.size = 10;
                this.sortBy = {
                    prop: '',
                    order: ''
                };
                this.$refs[table].clearSort();
                this.search();
            },
            //处理size变化的函数
            handleSizeChange(val) {
                this.size = val;
                this.search();
            },
            //处理当前页变化的函数
            handleCurrentChange(current) {
                this.current = current;
                this.axios.get("http://localhost:8080/logininfor/page?current=" + this.current + "&ipaddr=" + this.loginInFor.ipaddr
                    + "&userName=" + this.loginInFor.userName + "&status=" + this.loginInFor.status + "&size=" + this.size + "&loginTime=" + this.loginInFor.loginTime + "&order=" + this.sortBy.order + "&prop=" + this.sortBy.prop).then(
                    res => {
                        this.sysLoginInFors = res.data.data.records;
                        this.current = res.data.data.current;
                        this.total = res.data.data.total;
                        this.size = res.data.data.size;
                    }
                );
                this.disableDelete = true;
                this.disableEdit = true;
            },
            //清空方法
            handleDelete(index, row) {
                this.axios.delete("http://localhost:8080/logininfor/all").then(
                    res => {
                        if (res.data.data == 'ok') {
                            this.$message({
                                message: '清空成功！',
                                type: 'success'
                            });
                            this.search();
                        } else {
                            this.$message({
                                message: res.data.data,
                                type: 'error'
                            });
                        }
                    }
                )
            },
            //多删
            deletes() {
                this.axios({
                    method: 'delete',
                    url: "http://localhost:8080/logininfor/delete",
                    data: this.selections
                }).then(
                    res => {
                        if (res.data.data == 'ok') {
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            });
                            this.search();
                        } else {
                            this.$message({
                                message: res.data.data,
                                type: 'error'
                            });
                        }
                    }
                );
                this.disableDelete = true;
                this.selections = [];
            },

            //导出excel
            exportExcel() {
                this.axios({
                    method: "post",
                    url: "http://localhost:8080/logininfor/export", // 请求地址
                    data: this.sysLoginInFors, // 参数
                    responseType: 'blob' // 表明返回服务器返回的数据类型
                }).then(
                    res => {
                        if (res && res.data) {
                            // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名，我这后端返回时把文件名放到响应的header的filename字段中，所以用这种方式取出
                            this.jsFileDownload(res.data, decodeURIComponent("登录日志.xlsx"))
                        }
                    }
                )
            },
            //选中选项的事件方法
            checked(selection, row) {
                this.selections = selection;
                if (selection.length === 1) {
                    this.disableEdit = false;
                } else {
                    this.disableEdit = true;
                }
                if (selection.length >= 1) {
                    this.disableDelete = false;
                } else {
                    this.disableDelete = true;
                }
            },
            //全选按钮事件方法
            checkAll(selection) {
                this.selections = selection;
                if (selection.length === 1) {
                    this.disableEdit = false;
                } else {
                    this.disableEdit = true;
                }
                if (selection.length >= 1) {
                    this.disableDelete = false;
                } else {
                    this.disableDelete = true;
                }
            },
            //取消删除时
            cancelDelete() {
                this.$message({
                    message: '取消删除',
                });
            },
            sort(column) {
                this.sortBy.order = column.order;
                this.sortBy.prop = column.prop;
                this.axios.get("http://localhost:8080/logininfor/page?current=" + this.current + "&ipaddr=" + this.loginInFor.ipaddr
                    + "&userName=" + this.loginInFor.userName + "&status=" + this.loginInFor.status + "&size=" + this.size + "&loginTime=" + this.loginInFor.loginTime + "&order=" + this.sortBy.order + "&prop=" + this.sortBy.prop).then(
                    res => {
                        this.sysLoginInFors = res.data.data.records;
                        this.current = res.data.data.current;
                        this.total = res.data.data.total;
                        this.size = res.data.data.size;
                    }
                )
            }
        },
        created() {
            this.search();
        },
        mounted() {
            this.loadAll();
        }
    }
</script>

<style scoped>

</style>